<template>
	<div class="up-coming">
		<ul @touchmove="moveflag=true">
			<li class="item" v-for="item in upComingList" :key="item.filmId" @touchend="handleEnterMovieDetail(item.filmId)">
				<div class="item-img">
					<img :src="item.poster">
				</div>
				<div class="item-info">
					<h3 class="title">{{item.name}}</h3>
					<p class="actor">主演:
                        <span v-if="!item.actors">暂无主演</span>
						<span v-else v-for="(val, i) in item.actors" :key="i">
							{{val.name}}
						</span>
					</p>
					<p class="run-time">上映时间：{{item.premiereAt | setTime }}</p>
				</div>
				<!-- <p>影片详情：{{item.synopsis}}</p> -->
			</li>
		</ul>
		<p style="padding:15px 0;text-align:center;">加载更多</p>
        <ul>
            <li v-for="item in 20" :key="item">{{item}}</li>
        </ul>
	</div>
</template>

<script>
import { mapState } from "vuex"
export default {
	name: 'upcoming',
	data() {
		return {
			moveflag: false
		}
	},
	mounted() {
		this.getUpComingMovieList();
    },
	methods: {
        // 获取影片
		getUpComingMovieList() {
            if(this.$store.state.movieList.upComingList.length === 0) {
                this.$store.dispatch("movieList/getUpComingList")
            } else {
                console.log("upComing - 使用缓存数据");
            }
			
        },
        // 进入影片详情页
		handleEnterMovieDetail(movieId) {
			if(this.moveflag) {
				this.moveflag = false
				return;
            }
			// console.log(this.moveflag)
			this.$router.push("filmDetail/coming/" + movieId)
		}
    },
    computed: {
        ...mapState("movieList", ["upComingList"])
    },
	filters: {
		setTime(data) {
			data = data.toString().padEnd(13, "0")
			let d = new Date(Number(data));
			let day = ["日", "一", "二", "三", "四","五", "六"].filter((item, i) => i === d.getDay())
			return `周${day} ${d.getMonth()+1}月${d.getDate()}日`;
		}
	},
}
</script>

<style scoped>
.up-coming {
    flex: 1;
    background-color: #d2e2ca;
}
.up-coming ul {
    overflow: hidden;
    margin: 0 12px;
}
.up-coming ul li {
	position: relative;
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
	width: 100%;
	height: 94px;
	padding: 15px 15px 15px 0;
	border-top: 1px solid red;
}
.up-coming ul li:first-of-type {
	border-top: 0;
}
.up-coming .item-img{
	position: absolute;
	display: flex;
	align-items: center;
	width: 66px;
	height: 94px;
	background: rgb(210, 226, 202);
}
.up-coming .item-img>img {
	width: 100%;
}
/* calc(100% - 10px) 函数用于动态计算长度值  + - * / */
.up-coming .item-info{
	position: absolute;
	left: 60px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
	width: calc(100% - 90px);
	padding: 0 20px;
}
.up-coming .item-info .title,
.up-coming .item-info .actor,
.up-coming .item-info .run-time {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.up-coming .item-info .title{
	margin-bottom: 10px;
	font-size: 18px;
}
</style>
